<template>
<div class="commonBox5 pad15 left10 right10">
    <p>
        <span class="tit2">服务老人数统计</span>
    </p>
    <div ref="chart2" class='top20' style="width: 100%; height: 300px" />
</div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
    components: {},
    props: {},
    data() {
        return {
            chartData: {
                data1: ['助餐', '助洁', ' 助浴', '助购', ' 助医', '助护', '助聊', ' 助学', ' 助急'],
                data2: [33, 44, 55, 66, 77, 44, 55, 66, 77],
            }
        }
    },
    computed: {},
    watch: {

    },
    created() {
        const t = this;

    },
    mounted() {
        const t = this;
        t.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs.chart2, 'macarons')
            this.setOptions()
        },
        setOptions() {
            const t = this;
            this.chart.setOption({
                color: ['#AC9CFF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    top: '2%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: t.chartData.data1,
                    axisTick: {
                        alignWithLabel: true
                    }
                }],
                yAxis: [{
                    type: 'value'
                }],
                series: [{
                    type: 'bar',
                    barWidth: '50%',
                    data: t.chartData.data2
                }]
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
